﻿@page "/Home/Mall/Detail"
@inherits YiMeiJiaService.Assembly.BaseComponent
@using YiMeiJiaLibModel.Config
@using YiMeiJiaApp.Pages.Components
@using YiMeiJiaLibModel.Business
<script src="@ApiConf.ApiStatic()/js/swiper.min.js"></script>
@if (good == null)
{
    <script>
        $.showLoading('详情正在赶来...');
    </script>
}
else
{
    <script>
        $.hideLoading();
    </script>
}
@* 商品详情容器 *@
<div class="good-detail">

    <Headers MyPartialText="商品详情"></Headers>



    @{
        var model = new CoreCmsProducts();
    }
    @if (good != null)
    {
        model = good.product;
    }


    @if (good != null)
    {

        @* 轮播图 *@
        <div class="swiper-container" data-space-between='10' data-pagination='.swiper-pagination' data-autoplay="1000" style="margin-top:45px;">
            <div class="swiper-wrapper">

                @foreach (var item in good.album)
                {
                    <div class="swiper-slide"><img src="@item" alt="" class="detail-imgs"></div>
                }

            </div>
            <div class="swiper-pagination"></div>
        </div>
        @* 商品基础信息卡 *@
        <div class="detail-desc-card">
            <div class="weui-flex detail-card-price">
                <div class="weui-flex__item cm-txt-left price">
                    <small>￥</small>
                    <span> @model.price</span>
                </div>
                <div class="weui-flex__item cm-txt-right old-price">
                    @model.mktprice
                </div>
            </div>
            <div class="detail-card-tit">
                <h3>
                    @model.spesDesc
                </h3>
            </div>
            <div class="detail-card-brief">
                @good.brief
            </div>
            <div class="detail-card-brand">
                @if (good.brand != null)
                {
                    <span class="weui-badge" style="margin-left: 5px;">
                        品牌： @good.brand.name
                    </span>
                }

            </div>
            <div class="weui-flex detail-card-comm">
                <div class="weui-flex__item cm-txt-left">销量：@good.buyCount  </div>
                <div class="weui-flex__item cm-txt-center">分享</div>
                <div class="weui-flex__item cm-txt-right">收藏</div>
            </div>
        </div>
        @* 服务信息卡 *@
        @*  <div class="detail-desc-server"></div> *@
        @* sku 选择 *@
        <div class="detail-desc-sku">

            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p>积分可抵扣金额</p>
                    </div>
                    <div class="weui-cell__ft">@model.pointsDeduction</div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p>赠送积分</p>
                    </div>
                    <div class="weui-cell__ft">@model.points</div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p>库存</p>
                    </div>
                    <div class="weui-cell__ft">@selectSku.stock</div>
                </div>
                <a class="weui-cell weui-cell_access open-popup" href="javascript:;" data-target="#half">
                    <div class="weui-cell__bd">
                        <p>选中规格</p>
                    </div>
                    @*  @{
                var defaultSku = good.sku.Where(x => x.isDefalut).FirstOrDefault();
                } *@
                    <div class="weui-cell__ft" id="selectSku">
                        @selectSku.spesDesc
                    </div>
                </a>
            </div>
        </div>
        @* 商品详情 *@
        <div class="detail-desc-describe">
            @foreach (var item in good.album)
            {
                <img src="@item" />
            }
        </div>

        @* 购买按钮 *@
        <div class="detail-desc-container-buy"  >
            <div class="weui-flex buy-coniainer" @onclick="(()=>Buys(0))" >
                @* <div class="weui-flex__item buy-item">weui</div> *@
                <div class="weui-flex__item buy-item">
                    <p>原价：  @selectSku.price </p>
                    <p>积分抵扣： @selectSku.pointsDeduction </p>
                </div>
                <div class="weui-flex__item buy-item" >
                    <p class="p-buy-price">￥ @(selectSku.price - selectSku.pointsDeduction)</p>
                    <p class="p-buy-info">立即购买</p>
                </div>
            </div>
        </div>
    }
</div>

@* 规格选择 *@
<div id="half" class="weui-popup__container popup-bottom">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="toolbar">
            <div class="toolbar-inner">
                <a href="javascript:;" class="picker-button close-popup">
                    <img src="@ApiConf.ApiStatic()/Images/close.png" style="width:30px;" />
                </a>
                <h1 class="title">商品规格选择</h1>
            </div>
        </div>
        <div class="modal-content popup-sku">
            @* popup 内容 规格选择的内容 *@
            @if (selectSku != null)
            {
                <div class="weui-flex popup-sku-top">
                    <div class="weui-flex__item popup-sku-img">
                        <img src="@selectSku.images" />
                    </div>
                    <div class="weui-flex__item popup-sku-info">
                        <p class="price">
                            <small>￥</small>
                            <span>@selectSku.price</span>
                        </p>
                        <p class="stock">
                            库存: @selectSku.stock
                        </p>
                        <p class="select">
                            已选： @selectSku.spesDesc

                        </p>
                    </div>
                </div>

                <div class="weui-flex popup-sku-block">
                    @if (good.sku != null && good.sku.Any())
                    {
                        foreach (var item in good.sku)
                        {
                            <div class="weui-flex__item block" @onclick="(()=> SelectSku(item.id))">
                                <span>@item.spesDesc</span>
                            </div>
                        }

                    }
                    else
                    {
                        <div class="weui-flex__item block active">
                            <span>@selectSku.spesDesc</span>
                        </div>
                    }


                </div>
                <div class="popup-sku-bottom-border"></div>

                <div class="popup-sku-btn">
                    <a href="javascript:;" class="weui-btn weui-btn_warn" @onclick="(()=>Buys(0))">下单购买</a>
                </div>
            }


        </div>
    </div>
</div>


@if (good != null)
{
    <script>
        $("#shop-tabbar").slideToggle(2000);
        $(".swiper-container").swiper({
            loop: true,
            autoplay: 3000
        });
    </script>
}
<style>
    #app {
        background-color: #f3f4f6;
    }
</style>

<script>
    $(".block").click(function () {
        $(".block").removeClass("active");
        $(this).addClass("active");
    });
</script>
